
<template>
  <h1>{{ age }}</h1>
  <button @click='age++'>点击</button>
  <h1>{{ userName }}</h1>
  <button @click="userName='李四'">改名字</button>
</template>
<!-- // setup作为script的属性 是 setup函数的语法糖 -->
<script >
import { reactive, toRef , ref , toRefs } from "vue";
  export  default {
    name:"App",
    setup(){
      // 4. 使用 reactive创建的引用类型 
      // 所有属性变成响应式的;
        let obj = reactive({
              userName:"张三",
              age:18
          })
          // 使用ref 创建的响应式数据 必须 加上value才可以
          return {...toRefs(obj) }
      /*
      // 3. 使用 ref创建的引用类型 所有属性变成响应式的;
        let obj = ref({
              userName:"张三",
              age:18
          })
          // 使用ref 创建的响应式数据 必须 加上value才可以
          return {
              ...toRefs(obj.value)
          }
       // 2. 使用 ref创建的引用类型
          let obj = ref({
                userName:"张三",
                age:18
            })
            // 使用ref 创建的响应式数据 必须 加上value才可以
          let age = toRef(obj.value,'age')
            return {
              age
          }
      // 1. 使用reactive 创建的引用类型
            let obj = reactive({
              userName:"张三",
              age:18
            })
            let age = toRef(obj,'age')
            return {
              age
            }
      */ 

    }
  }
</script>

